<!--//登录-->
<template>
  <div>
    <!--登录框-->
    <div class="login" id="login">
      <h1>Login</h1>
      <form action="" method="post">
        <input type="text" placeholder="username" maxlength="16" v-model="name">
        <input type="password" placeholder="Password" maxlength="20"  v-model="password">
        <a href="javascript:;" class="log-btn" @click="login">Sign me in</a>
      </form>
    </div>
    <!--动态切换背景图-->
    <div id="supersized" class="quality" style="visibility: visible;">
      <!--属性用法前面要加冒号  不然不起作用-->
      <van-swipe :autoplay="4000" :show-indicators="false" >
        <van-swipe-item>
            <a target="_blank">
              <img src="../images/login2.jpg">
            </a>
        </van-swipe-item>
        <van-swipe-item>
            <a target="_blank">
              <img src="../images/login3.jpg">
            </a>
        </van-swipe-item>
        <van-swipe-item>
          <a target="_blank">
            <img src="../images/login1.jpg">
          </a>
        </van-swipe-item>
      </van-swipe>
    </div>
    <Loading v-if="isLoging"></Loading>
  </div>
</template>

<script>
import { ActionSheet, Dialog } from 'vant';
import Loading from '@/components/Loading.vue'
export default {
    name: 'Login',
    data(){
      return {
        isLoging: false,
        name: '',
        password: '',
        userInfo: { //保存用户信息
          name: null,
          age: null,
          id: null,
          portrait: null,
          autograph:null
        },
      }
    },
    created(){
    },
    components:{
      Loading
    },
    methods:{

      //登录逻辑
      login(){
        if(this.name!='' && this.password!=''){     
           this.toLogin();
         }else{
           Dialog.alert({
             message:'账号密码必填！'
           })
         }
      },

      //登录请求
      toLogin(){
        //一般要跟后端了解密码的加密规则

        //需要想后端发送的登录参数
        let loginParam = {
          name: this.name,
          password: this.password
        }
        //设置在登录状态  就是加载Loading
        this.isLoging = true;

        //请求后端,比如:
        const that = this;
        that.getUserInfo(); //登录成功就获取用户信息
        setTimeout(()=>{
          //登录状态30分钟后过期
          let expireDays = 60*30;
          that.setCookie('session','hahahahah', expireDays);
          that.isLoging = false;//去掉Loading
          //登录成功后
          that.$router.push('/home');
        },2500)
        // that.axios.get('/number/login').then(function (res) {
        //     //登录成功
        //     if(res.data.code == 200){
        //       that.getUserInfo(); //登录成功就获取用户信息
        //       setTimeout(()=>{
        //         //登录状态30分钟后过期
        //         let expireDays = 60*30;
        //         that.setCookie('session','hahahahah', expireDays);
        //         that.isLoging = false;//去掉Loading
        //         //登录成功后
        //         that.$router.push('/home');
        //       },1500)

        //     }
        //   }).catch(err =>{
        //   if(err.response.status!==200){
        //     that.getUserInfo(); //登录成功就获取用户信息
        //       setTimeout(()=>{
        //         //登录状态30分钟后过期
        //         let expireDays = 60*30;
        //         that.setCookie('session','hahahahah', expireDays);
        //         that.isLoging = false;//去掉Loading
        //         //登录成功后
        //         that.$router.push('/home');
        //       },500)
        //   }
        // })
      },
      //登录成功就获取用户信息
      getUserInfo(){
        const that = this;
        //登录后获取当前城市名，以及对应id
        that.axios.get('/hai/getLocation').then(function (res) {
          if(!res.data.data){
            that.names = {
              cityName:'深圳',
              id:30
            }
          }else{
             that.names = {
              cityName:res.data.data.nm,
              id:res.data.data.id
            }
          }
          //提交mutation到Store
          that.$store.commit('add', that.names);
        })
        // 切换到Login页面时获取用户信息
        
        that.axios.get('/number/user').then(function (res) {
          that.userInfo = {
            name:res.data.user.name,
            age:res.data.user.age,
            id:res.data.user.id,
            portrait:res.data.user.portrait,
            autograph:res.data.user.autograph
          }
          //提交mutation到Store
          that.$store.commit('updateUserInfo', that.userInfo);
        }).catch(err =>{
          if(err.response.status!==200){
            that.userInfo = {
              name:'Heisenberg',
              age:'24',
              id:'404132966',
              portrait:"../images/icon.jpg",
              autograph:'我于杀戮之中绽放,亦如黎明中的花朵',
          }
          //提交mutation到Store
          that.$store.commit('updateUserInfo', that.userInfo);
          }
        })
        
        
      }
    }
  }
</script>

<style scoped  lang="less">
  body{
    background: #f8f8f8;
    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
    text-align: center;
    color: #fff;
  }
  .login{
    margin: 120px auto 0 auto;
    h1{
      text-align: center;
      font-size: 30px;
      font-weight: 700;
      text-shadow: 0 1px 4px rgba(0,0,0,.2);
      color: #fff;
    }
    form{
      position: relative;
      width: 305px;
      margin: 15px auto 0 auto;
      text-align: center;
      input{
        color: #fff;
        width: 270px;
        height: 42px;
        margin-top: 25px;
        padding: 0 15px;
        background: rgba(45,45,45,.15);
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        border: 1px solid rgba(255,255,255,.15);
        -moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
        -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
        box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
        font-family: 'PT Sans', Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #fff;
        text-shadow: 0 1px 2px rgba(0,0,0,.1);
        -o-transition: all .2s;
        -moz-transition: all .2s;
        -webkit-transition: all .2s;
        -ms-transition: all .2s;
      }
      input::-webkit-input-placeholder{
        color: #fff;
      }
      .log-btn{
        display: inline-block;
        cursor: pointer;
        width: 300px;
        height: 44px;
        line-height: 44px;
        margin-top: 25px;
        padding: 0;
        background: #ef4300;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        border: 1px solid #ff730e;
        -moz-box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset, 0 2px 7px 0 rgba(0,0,0,.2);
        -webkit-box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset, 0 2px 7px 0 rgba(0,0,0,.2);
        box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset, 0 2px 7px 0 rgba(0,0,0,.2);
        font-family: 'PT Sans', Helvetica, Arial, sans-serif;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        text-shadow: 0 1px 2px rgba(0,0,0,.1);
        -o-transition: all .2s;
        -moz-transition: all .2s;
        -webkit-transition: all .2s;
        -ms-transition: all .2s;
      }
      .log-btn:hover{
        text-decoration: none;
      }
    }
  }
  #supersized {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: -999;
    height: 100%;
    width: 100%;
    .van-swipe{
      height: 100%;
      img{
        height: 100%;
      }
      @media screen and (min-width: 1200px) {
        img{
          height: 100%;
          width: 100%;
        }
      }
    }

  }

</style>
